<template>
  <div>
    <h1>总结：</h1>

    <div class="box">
      <el-card shadow="hover">
        <h3>其他</h3>

        <dl>
          <dt>路由：</dt>
          <dd>子路由跳转页面需要`router-view`标签</dd>

          <dt>面包屑跳转：</dt>
          <dd>根据路由从而实现，使用transition-group达到动画效果</dd>
        </dl>
      </el-card>

      <el-card shadow="hover">
        <h3>表格页面：</h3>

        <dl>
          <dt>el-table：</dt>
          <dd>如果想要监听表格滚动，必须要有固定高度</dd>

          <dt>懒加载：</dt>
          <dd>根据窗口高度和滚动高度判断什么时候进行数据加载</dd>
        </dl>
      </el-card>

      <el-card shadow="hover">
        <h3>记事本页面：</h3>

        所用技术点：
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Summarize',
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap; /* 自动换行 */
  gap: 20px; /* 卡片之间的间距 */

  .el-card {
    flex: 1 0 calc(33.33% - 20px); /* 每行 3 列，减去间距 */
    max-width: calc(33.33% - 20px); /* 设置最大宽度，减去间距 */
    border-radius: 30px ;
  }
}
</style>
